<template>
  <div class="bgt-container">
    <div class="hd">
      <el-form :model="hdForm" inline>
        <el-form-item prop="title">
          <el-input
            size="small"
            style="width: 200px"
            placeholder="请输入标题信息"
            v-model="hdForm.title"
          ></el-input>
        </el-form-item>
        <el-form-item prop="tag">
          <el-select
            v-model="hdForm.tag"
            class="m-2"
            placeholder="请选择标签"
            size="small"
          >
            <el-option
              v-for="item in tagOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            v-model="hdForm.startTime"
            type="datetime"
            placeholder="开始时间"
            size="small"
            value-format="YYYY-MM-DD"
            style="width: 150px; margin-right: 10px"
          />
          <el-date-picker
            v-model="hdForm.endTime"
            type="datetime"
            placeholder="结束时间"
            value-format="YYYY-MM-DD"
            size="small"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <TsButton
            label="搜索"
            perms="exposureStage:list:get"
            type="primary"
            size="small"
            @click="search"
          ></TsButton>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="hd-option">
        <TsButton
          label="添加"
          perms="exposureStage:add:post"
          type="success"
          size="small"
          @click="addExpose"
        ></TsButton>
        <TsButton
          label="删除"
          perms="exposureStage:delete:delete"
          type="danger"
          size="small"
          @click="del"
        ></TsButton>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#FEF6F6' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="标题" width="300" />
        <el-table-column
          prop="tags"
          label="标签"
          width="300"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag
              style="margin-right: 10px"
              size="small"
              v-for="item in scope.row.tags"
              :key="item.id"
              >{{ item.name }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="时间"
          width="180"
          :formatter="dateFormat"
        />
        <el-table-column label="操作" fixed="right" width="240px">
          <template #default="scope">
            <TsButton
              perms="exposureStage:$id:get"
              label="详情"
              type="text"
              size="mini"
              @click="detail(scope.row.id)"
            ></TsButton>
            <TsButton
              perms="exposureStage:update:post"
              label="修改"
              style="color: #2968ea"
              type="text"
              size="mini"
              @click="edit(scope.row.id)"
            ></TsButton>
            <TsButton
              perms="exposureStage:delete:delete"
              style="color: #ea1648"
              type="text"
              size="mini"
              label="删除"
              @click="delBgt(scope.row.id)"
            ></TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页区域-->
    <el-pagination
      style="float: right; margin: 20px"
      background
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
    />
  </div>
</template>

<script setup>
import moment from "moment";
import { onMounted, ref } from "vue";
import {
  exposeList,
  tagsList,
  delExpose,
  exposureStage,
} from "@/api/message/expose";
import commonPageRepository from "@/composables/common-page-repository";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
//分页数据
const tableData = ref([]);
//标签数据
const tagOptions = ref([]);
//分页查询数据
const pageNum = ref(1);
const pageSize = ref(50);
const totalNum = ref(0);
const hdForm = ref({});
//选项卡默认选中
//获取分页数据
function getExposeList() {
  exposeList({
    pageNumber: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    totalNum.value = res.data.totalElements;
    tableData.value = res.data.content;
  });
}
//改变分页事件
const { pageSizeChange, pageCurrentChange } = commonPageRepository(
  pageSize,
  pageNum,
  getExposeList
);
//获取标签数据
function getTagsList() {
  tagsList().then((res) => {
    tagOptions.value = res.data;
  });
}
//搜索事件
function search() {
  pageNum.value = 1;
  exposeList({
    pageNumber: pageNum.value,
    pageSize: pageSize.value,
    title: hdForm.value.title,
    startTime: hdForm.value.startTime,
    endTime: hdForm.value.endTime,
    tag: hdForm.value.tag,
  }).then((res) => {
    totalNum.value = res.data.totalElements;
    tableData.value = res.data.content;
  });
}
//重置方法
function reset() {
  hdForm.value = {};
  getExposeList();
}
//跳转到添加页面
const router = useRouter();
function addExpose() {
  router.push({
    name: "addExpose",
  });
}
//时间戳转换时间
function dateFormat(row, column, data) {
  return moment.unix(data).format("YYYY-MM-DD HH:mm:ss");
}
//多选数组
const chooseData = ref([]);
//多选事件
function handleSelectionChange(val) {
  chooseData.value = val.map((item) => item.id);
}
//批量删除
function del() {
  if (chooseData.value.length === 0) {
    ElMessage.warning("请选择数据后再操作");
    return;
  }
  delExpose(chooseData.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success("批量删除成功!");
      getExposeList();
    }
  });
}
//跳转到详情页面
function detail(id) {
  router.push({
    name: "DetailExpose",
    query: {
      id,
    },
  });
}
//跳转到修改页面
function edit(id) {
  router.push({
    name: "addExpose",
    query: {
      id,
    },
  });
}
//单条删除
function delBgt(id) {
  ElMessageBox.confirm("您确定要删除这条数据么?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      exposureStage(id).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getExposeList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
onMounted(() => {
  getExposeList();
  getTagsList();
});
</script>

<style scoped lang="scss">
.bgt-container {
  height: calc(100vh - 280px);
  .hd {
    display: flex;
    justify-content: space-between;
    .hd-option {
      margin-top: 5px;
    }
  }
  .table {
    height: calc(100% - 160px);
    overflow-y: auto;
  }
}
</style>
